<template>
  <div card>
    <div my-20rpx p-36rpx flex flex-a-c flex-j-sb>
      <div font-bold text-30rpx>填写物流信息</div>
      <div text-24rpx color-warmgray flex flex-a-c>

      </div>
    </div>
    <nut-config-provider :theme-vars="{
      cellBoxShadow: 'none',
      cellPadding: '23rpx',
      formItemTipFontSize: '24rpx'
    }">
      <nut-form label-position="top" :model-value="express" :rules="rules" ref="ruleForm">
        <nut-form-item :show-error-line="false" label="快递公司" prop="courierCompany">
          <div mt-20rpx line-height-70rpx :style="verifyInputStyle" color-black @click="expressRef.show = true"> {{
            express.courierCompany
            || '请选择快递公司' }}</div>
        </nut-form-item>
        <nut-form-item :show-error-line="false" label="快递单号" prop="logisticsNo">
          <nut-input :input-style="{ ...verifyInputStyle }" :border="false" v-model="express.logisticsNo" placeholder="请输入快递单号"
            type="text" />
        </nut-form-item>
        <nut-form-item :show-error-line="false" label="发货时间" prop="mDeliverTime">
          <div line-height-70rpx :style="verifyInputStyle" color-black mt-20rpx @click="isVisible = true"> {{
            express.mDeliverTime ||
            '请选择发货时间' }}</div>
          <div mt-20rpx>发货时间可选择60天内</div>
        </nut-form-item>
      </nut-form>
    </nut-config-provider>



    <div my-20rpx p-36rpx flex flex-a-c flex-j-sb>
      <div font-bold text-30rpx>商家退货地址</div>
      <div text-24rpx color-warmgray flex flex-a-c>

      </div>
    </div>
  <div mb-24rpx card>
    <div>
      <div class="order-cell">
        <div class="order-cell_label">收货地址：</div>
        <div class="order-cell_value" v-if="storeAfterSaleAddress.salesConsigneeAddressPath">{{storeAfterSaleAddress.salesConsigneeAddressPath}}</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">联系人：</div>
        <div class="order-cell_value">{{ storeAfterSaleAddress.salesConsigneeName }}</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">联系方式：</div>
        <div class="order-cell_value">{{ storeAfterSaleAddress.salesConsigneeMobile}}</div>
      </div>
    </div>
  </div>





    <submit title="提交" :loading="loading" @click="submitVerify" />
    <!-- 选择快递 -->
    <chooseExpress ref="expressRef" @click="chosenExpress" :loading="loading" />
    <nut-calendar v-model:visible="isVisible" :start-date="beforeTimestamp" :end-date="laterTimestamp"
      :default-value="date" @choose="setChooseValue">
    </nut-calendar>
  </div>
</template>

<script setup lang="ts">
import { fillShipInfo, getStoreAfterSaleAddress } from '@/api/after-sale';
import chooseExpress from '@/components/express/index.vue';
import submit from '@/components/sheet-btn/index.vue';
import { InputStyle } from '@/constants/injection-key';
import { unixToDate } from '@/utils/filters';
import { onLoad } from '@dcloudio/uni-app';
const loading = ref<boolean>(false)
const expressRef = ref<any>('')
const routerVal = ref<any>(null)
const ruleForm = ref<any>(null)
const daysLater = ref<any>(new Date().getTime() + 30 * 24 * 60 * 60 * 1000); //默认30天后
const daysBefore = ref<any>(new Date().getTime() - 30 * 24 * 60 * 60 * 1000); //默认30天前
const laterTimestamp = ref<any>(unixToDate(daysLater.value / 1000, 'yyyy-MM-dd'));
const beforeTimestamp = ref<any>(unixToDate(daysBefore.value / 1000, 'yyyy-MM-dd'));
const express = ref<any>({
  courierCompany: "", //快递公司
  logisticsId: "", //快递公司ID
  logisticsNo: "", //快递单号
  mDeliverTime: "" //发货时间
})
const isVisible = ref<boolean>(false)
const date = ref<any>('')
const storeAfterSaleAddress = ref<any>(''); // 商家售后地址

function setChooseValue(val: any) {
  express.value.mDeliverTime = val[3]

}


// 规则
const rules = {
  logisticsNo: [
    {
      required: true,
      message: '快递单号不能为空',
      trigger: 'change',
    },
  ],
  mDeliverTime: [
    {
      required: true,
      message: '发货时间不能为空',
      trigger: 'change',
    },
  ],
  courierCompany: [
    {
      required: true,
      message: '快递公司不能为空',
      trigger: 'change',
    },
  ],
}
const verifyInputStyle = { ...InputStyle, marginBottom: '12rpx' }

// 回调选择快递
function chosenExpress(val: any) {
  express.value.courierCompany = val.name
  express.value.logisticsId = val.id
  expressRef.value.show = false
}

function submitVerify() {
  ruleForm.value.validate().then(async ({ valid }: any) => {
    if (valid) {
      loading.value = true
      const res = await fillShipInfo(routerVal.value.sn, express.value)
      loading.value = false
      if (res.data.success) {
        uni.showToast({
          title: "提交成功",
          icon: "none"
        })

        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      }
    } else {
      uni.showToast({
        title: "请填写完整信息",
        icon: "none"
      })
    }
  })
}

// 获取卖家地址
async function getAddress() {
  const res = await getStoreAfterSaleAddress(routerVal.value.sn)
  if (res.data.success) {
    storeAfterSaleAddress.value = res.data.result
  }
}

onLoad((options: any) => {
  routerVal.value = options;
  getAddress();
})
</script>

<style scoped lang="scss">
  .order-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;

    font-size: 24rpx;

    &_label {
      color: #999;
      font-size: 24rpx;
      min-width: 150rpx;
    }

    &_value {
      text-align: right;

    }
  }
</style>
